<?php slot('header')?>
<style type="text/css">
	aside.right{
		float: none;
		width: auto;
		margin-top: -20px;
	}
	div.area-filter {
		background: #dfdfdf;
		padding: 10px;
	}
	div.area-filter label{
		display: inline-block;
		margin: 0px 10px 0px 20px;
	}
	div.area-contain{
		margin-top: 20px;
	}
	div.area-contain table{
		border: 1px solid #ccc; 
		border-collapse: collapse;
		background: #fff;
	}
	div.area-contain table td{
		padding: 5px 10px;
	}
	div.area-contain table td.area{
		background: #ece4cf;
		text-transform: capitalize;
	}
	div.area-contain table td.province{
		padding-left: 50px;
		text-transform: capitalize;
	}
	div.area-contain table td.district{
		padding-left: 100px;
		text-transform: capitalize;
	}
	div.area-contain table td.branch{
		padding-left: 150px;
		
	}
	div.area-contain table td.address{
		width: 350px;
	}
	.b-title{
		padding: 10px 0px 10px 0px;
		text-transform: uppercase;
		font-size: 18px;
		color: #937110;
		font-family: 'UTM Copperplate';
	}
</style>
<script type="text/javascript">
$(function(){
	MAIN.setMenu('m-branch');
	FORM.init();
	$('#dtDistrict').change(function(){
		reloadBranch($(this));
	});
});
function reloadProvince(data){
	var $json = $.parseJSON(data);
	var $relate = $('#dtProvince');
	$relate.html('<option value="-1">---Tất cả---</option>"');
	for(var i=0; i<$json.length; i++){
		$relate.append('<option value="'+$json[i].id+'">'+$json[i].name+'</option>');
	}
	 $relate.trigger('change');
}
function reloadDistrict(data){
	var $json = $.parseJSON(data);
	var $relate = $('#dtDistrict');
	$relate.html('<option value="-1">---Tất cả---</option>"');
	for(var i=0; i<$json.length; i++){
		$relate.append('<option value="'+$json[i].id+'">'+$json[i].name+'</option>');
	}
	 $relate.trigger('change');
}
function reloadBranch($ob){
	if(LOADING.isLoading) return false;
	LOADING.show();
	$.ajax({
		type: "POST",
		url: $ob.attr('data-url'),
		data: {
			'act_ext': $ob.attr('data-action-ext'),
			'area_id': $('#dtArea').val(),
			'province_id': $('#dtProvince').val(),
			'district_id': $ob.val()
		},
		cache: false,
		success: function(data){
			LOADING.hide();
			$json = $.parseJSON(data);
			var $tbl = $('#area-contain > table > tbody').html('');
			for(var i=0; i<$json.length; i++){
				$tbl.append('<tr><td colspan="5" class="area">'+$json[i].name+'</td></tr>');
				for(var ii=0; ii<$json[i].provinces.length; ii++){
					$tbl.append('<tr><td colspan="5" class="province">'+$json[i].provinces[ii].name+'</td></tr>');
					for(var iii=0; iii<$json[i].provinces[ii].districts.length; iii++){
						$tbl.append('<tr><td colspan="5" class="district">'+$json[i].provinces[ii].districts[iii].name+'</td></tr>');
						for(var iiii=0; iiii<$json[i].provinces[ii].districts[iii].branches.length; iiii++){
							$tbl.append('<tr class=""><td colspan="4" class="branch">'+$json[i].provinces[ii].districts[iii].branches[iiii].name+'</td><td class="address">'+$json[i].provinces[ii].districts[iii].branches[iiii].address + ', ' + $json[i].provinces[ii].districts[iii].name + ', ' + $json[i].provinces[ii].name + '<br/>' +$json[i].provinces[ii].districts[iii].branches[iiii].email+ '</td></tr>');
						}
					}
				}
			}
		}
	});
}

</script>
<?php end_slot()?>
<?php slot('rhead')?>
<?php include_component('componentUlti', 'slide')?>
<?php end_slot()?>
<div class="hline" style="border-top: 2px solid #fff"></div>
<div class="logo-none-slogan"></div>
<div class="p-title">Kênh phân phối sản phẩm</div>
<div class="content-padding">
	<div class="hz-clr"><?php echo (SysPages::getContent(SysPages::BRANCH_NOTE))?></div>
</div>
<div class="content-padding">
	<div class="area-filter">
		<label for="dtArea">Khu vực</label>
		<select class="hz-select-reload" data-action-ext="<?php echo Branches::AJAX_PROVINCE?>" name="dtArea" id="dtArea" data-url="/branch/ajax" on-success="reloadProvince">
			<option value="-1">---Chọn khu vực---</option>
			<?php foreach ($data['areas'] as $are):?>
			<option value="<?php echo $are['id']?>"><?php echo $are['name']?></option>
			<?php endforeach;?>
		</select>
		<label for="dtProvince">Tỉnh/ Thành Phố</label>
		<select class="hz-select-reload" data-action-ext="<?php echo Branches::AJAX_DISTRICT?>" name="dtProvince" id="dtProvince" data-url="/branch/ajax" on-success="reloadDistrict">
			<option value="-1">---Tất cả---</option>
		</select>
		<label for="dtDistrict">Quận/ Huyện</label>
		<select name="dtDistrict" id="dtDistrict" data-url="/branch/ajax" data-action-ext="<?php echo Branches::AJAX_BRANCH?>">
			<option value="-1">---Tất cả---</option>
		</select>
	</div>
	<div class="area-contain" id="area-contain">
		<div class="b-title">Danh sách</div>
		<table border="1" cellspacing="0" width="100%">
			<tbody>
				<?php foreach ($data['branches'] as $br):?>
				<tr>
					<td colspan="5" class="area"><?php echo $br['name']?></td>
				</tr>
				<?php foreach($br['provinces'] as $pr):?>
				<tr>
					<td colspan="5" class="province"><?php echo $pr['name']?></td>
				</tr>
				<?php foreach($pr['districts'] as $dt):?>
				<tr>
					<td colspan="5" class="district"><?php echo $dt['name']?></td>
				</tr>
				<?php foreach ($dt['branches'] as $brin):?>
				<tr class="">
					<td colspan="4" class="branch"><?php echo $brin['name']?></td>
					<td class="address">
						<?php echo $brin['address'], ', ', $dt['name'], ', ', $pr['name']?> <br/>
						<?php echo $brin['email']?>
					</td>
				</tr>
				<?php endforeach;?>
				<?php endforeach;?>
				<?php endforeach;?>
				<?php endforeach;?>
			</tbody>
		</table>
	</div>
</div>